<template>
	<view class="l_pages" :style="skin">
		<jnavbar :title="'申请售后'"></jnavbar>
		<scroll-view class="box page_container" scroll-y>
			<u-gap height="26" bg-color="#f4f4f4"></u-gap>
			<view class="good_div">
				<text class="title">退款商品</text>
				<block v-for="(item, i) in list" :key="i">
					<view class="goodinfo">
						<view class="uni-flex-row uni-flex-title">
							<vimage class="img_box" :src="item.commodity.master" mode=""></vimage>
						<!-- 	<view class="uni-flex-column info_text">
								<text class="u-line-2">{{ item.commodity.name }}</text>
								<text class="sm-font">{{ item.commodity.pvs_value || '' }}</text>
								<view class="uni-flex-row uni-flex-title">
									<text>￥{{ item.price }}</text>
									<text>{{ item.count }}</text>
								</view>
							</view> -->
							<view class="goods_content uni-flex-column">
								<text class="u-main-color u-line-2">{{ item.commodity.name }}</text>
								<text class="u-tips-color u-line-1" v-if="item.sku">{{ item.sku.pvs_value || '' }}</text>
							<!-- 	<text>数量:{{ item.count }}</text> -->
							</view>
							<view class="goods_price uni-flex-column">
								<text>￥{{ item.price }}x{{ item.count }}</text>
								
							</view>
						</view>
						<view v-if="item.attachlist" v-for="(data, i) in item.attachlist" class="u-content-color u-flex u-row-between u-font-sm u-margin-top-20">
							<text>{{ data.attach_value }}</text>
							<text>&yen;&nbsp;{{ data.attach_price }}x{{ item.count }}</text>
						</view>
					</view>
				</block>
			</view>

			<view class="good_div">
				<text class="title">选择服务类型</text>
				<view class="goodinfo">
					<view v-if="retreat.indexOf('1') > -1" class="item uni-flex-row uni-flex-title" @click="tosubmit(1)">
						<view class="uni-flex-row">
							<text class="el-sc-tuikuan3 iconfont"></text>
							<view class="uni-flex-column">
								<text>仅退款</text>
								<text>没收到货，或与卖家协商同意不用退货只退款</text>
							</view>
						</view>

						<text class="el-sc-xiangyou iconfont"></text>
					</view>
					<block v-if="status > 2 && retreat.indexOf('2') > -1">
						<view class="item uni-flex-row uni-flex-title" @click="tosubmit(2)">
							<view class="uni-flex-row">
								<text class="el-sc-tuihuo iconfont"></text>
								<view class="uni-flex-column">
									<text>退货退款</text>
									<text>已收到货，需要退还收到的货物</text>
								</view>
							</view>
							<!-- <view class=""><text>退货退款</text></view>
 -->
							<text class="el-sc-xiangyou iconfont"></text>
						</view>
					</block>
					<block v-if="status > 2 && retreat.indexOf('3') > -1">
						<view class="item uni-flex-row uni-flex-title" @click="tosubmit(3)">
							<view class="uni-flex-row">
								<text class="el-sc-huanhuo iconfont"></text>
								<view class="uni-flex-column">
									<text>换货</text>
									<text>已收到货，需要换货</text>
								</view>
							</view>
							<!-- <view class=""><text>换货</text></view> -->
							<text class="el-sc-xiangyou iconfont"></text>
						</view>
					</block>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			list: [],
			orderdetail: {},
			status: 0,
			retreat: ''
		};
	},
	async onLoad(e) {
		await this.$getWx
		this.id = e.id;
		this.oid = e.oid;
		this.getdetail(e.oid);
	},
	computed: {
		skin() {
			return this.$store.state.skin;
		}
	},
	methods: {
		tosubmit(type) {
			this.Jumpurl(
				{
					link: 'aftersale_submit?id=' + this.id + '&oid=' + this.oid + '&type=' + type,
					type: 1,
					login_type: 2
				},
				'redirect'
			);
		},
		getafterSales() {
			let ids = [];
			this.list.forEach(a => {
				ids.push(a.id);
			});
			let data = {
				ids: ids
			};
			this.$http('/order/afterSales', data, 'POST').then(res => {
				if (!res.data.msg) {
					uni.showModal({
						title: '错误',
						content: '商品未开启退货功能！',
						showCancel: false,
						success() {
							uni.navigateBack({});
						}
					});
				} else {
					this.retreat = res.data.msg;
				}
			});
		},

		//订单详情
		getdetail(id) {
			this.$http('/order/readOrder/' + id, {}, 'GET').then(res => {
				if (res.statusCode == 200) {
					this.orderdetail = res.data.msg;
					if (this.orderdetail.attach && this.orderdetail.attach.length > 0) {
						this.orderdetail.order_commodity.forEach(item => {
							item.attachlist = [];
							if (item.attach_value) {
								this.orderdetail.attach.forEach(a => {
									if (item.attach_value.indexOf(a.attach_value) > -1 && item.attachlist.findIndex(_ => _.attach_value == a.attach_value) == -1) {
										
										item.attachlist.push(a);
										
										
									}
								});
							}
						});
					}
					if (this.id == 'all') {
						this.list = this.orderdetail.order_commodity;
						this.status = this.orderdetail.status;
					} else {
						let detail = this.orderdetail.order_commodity.filter(_ => {
							return _.id == this.id;
						});
						let data = detail[0];
						this.status = data.status;
						this.list.push(data);
					}
					this.getafterSales();
				} else {
					uni.showToast({
						title: res.data.error_msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.box {
	height: 100vh;
}
.good_div {
	width: 718rpx;
	// height: 293px;
	background: #ffffff;
	border-radius: 20rpx;
	margin-left: 16rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	.title {
		display: block;
		padding: 24rpx;
		font-size: 32rpx;
	}
}
.goodinfo {
	width: 718rpx;
	background-color: #fff;
	// margin: 0rpx 32rpx;
	padding: 20rpx;
	margin: 0 auto;
	// margin-left: 16rpx;
	font-size: 30rpx;
	// border-bottom: 1rpx solid #f5f5f5;
	// border-radius: 12rpx;

	.img_box {
		width: 180rpx;
		height: 180rpx;
		border-radius: 6rpx;
		margin-right: 26rpx;
	}
	.info_text {
		flex: 1;
		font-size: 28rpx;
		// justify-content: space-between;
		height: 180rpx;
		// padding-left: 20rpx;
		.u-line-2 {
			font-size: 26rpx;
			color: #333333;
			line-height: 46rpx;
			height: 92rpx;
		}
		.sm-font {
			font-size: 24rpx;
			color: #d1d1d1;
			margin: 5rpx 0;
		}
	}
	.item {
		padding: 20rpx 10rpx;

		.iconfont {
			font-size: 40rpx;
			color: var(--main-color);
			margin-right: 30rpx;
		}
		.el-sc-xiangyou {
			color: #939395;
			font-size: 20rpx;
			margin-right: 0;
		}
		.uni-flex-column {
			text:first-child {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				margin-bottom: 15rpx;
			}
			text:last-child {
				font-size: 24rpx;
				font-weight: 500;
				color: #4f4f4f;
			}
		}
	}
	.evanswitch {
		transform: scale(0.6);
	}
}
.line {
	width: 100%;
	height: 1rpx !important;
	background-color: #f5f5f5;
}
.goods_content {
	width: 320rpx;
	height: 140rpx;
	justify-content: space-between;
	margin-left: 20rpx;
	text:first-child {
		font-size: 26rpx;
		color: #333333;
	}

	text:last-child {
		font-size: 26rpx;
		color: #999999;
		font-weight: bold;
	}
}

.goods_price {
	flex: 1;
	align-items: flex-end;
	height: 140rpx;
	text:first-child {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
	}
}
</style>
